import React, { PureComponent, Fragment } from 'react';
import { Row, Col, Form, Button, Input, Select, DatePicker, InputNumber, Cascader } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { RangePicker } = DatePicker;

import styles from './../../../Municipal/Yhgl.less';

import moment from 'moment';
import { connect } from 'dva';
@connect(({ maintain, config, loading }) => ({
  wtlxList: maintain.wtlxList,
  // wtlxZList: maintain.wtlxZList,
}))
class YhglQueyForm extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      wtlxZList: [],
    };
    this.dispatch = this.props.dispatch;
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleReset = this.handleReset.bind(this);
    this.handleWtlxChange = this.handleWtlxChange.bind(this);
  }

  componentDidMount() {
    this.GetClass();
  }

  /* 获取下拉框初始数据 */

  // 点击button
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        var q = this.props.queryCon;
        this.props.GetQueryProblem({
          app: q['app'],
          pagesize: q['pagesize'],
          pageindex: q['pageindex'],

          companyid: values.companyid != undefined ? values.companyid : q['companyid'],
          type: values.type != undefined ? values.type : q['type'],
          ztype: values.ztype != undefined ? values.ztype : q['ztype'],
          source: q['source'],
          status: values.status != undefined ? values.status : q['status'],

          bovertime: values.bovertime != undefined ? values.bovertime : q['bovertime'],
          eovertime: values.eovertime != undefined ? values.eovertime : q['eovertime'],

          btime:
            values.sbtime != undefined ? values.sbtime[0].format('YYYY-MM-DD HH:mm') : q['btime'],
          etime:
            values.sbtime != undefined ? values.sbtime[1].format('YYYY-MM-DD HH:mm') : q['etime'],
        });
      }
    });
  };

  handleReset = () => {
    this.props.form.resetFields();
    this.props.GetQueryProblem();
  };

  // 获取"问题类型" 大类
  GetClass = () => {
    this.dispatch({
      type: 'maintain/fetchGetClass',
      callback: response => {
        if (response.ErrorMessage) {
          message.error.error('获取失败');
          console.log(response.ErrorMessage);
        }
      },
    });
  };

  //选择问题类型大类后触发
  handleWtlxChange = value => {
    this.dispatch({
      type: 'maintain/fetchGetZClass',
      payload: {
        id: value,
      },
      callback: response => {
        this.setState({ wtlxZList: response.data });
        this.props.form.setFields({
          ztype: {
            value: '',
          },
        });
        // if (response.status) {
        // } else {
        //   message.error('问题类型子类获取失败');
        //   console.log(response.ErrorMessage);
        // }
      },
    });
  };

  render() {
    var s = this.state;
    var p = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 15 },
    };
    const formItemLayout1 = {
      labelCol: { span: 12 },
      wrapperCol: { span: 10 },
    };
    const formItemLayout2 = {
      labelCol: { span: 10 },
      wrapperCol: { span: 13 },
    };
    const { wtlxList } = this.props;

    return (
      <Form className={styles.yhglQueyForm} onSubmit={this.handleSubmit}>
        <Row>
          <Col span={6}>
            <FormItem {...formItemLayout} label="养护单位">
              {getFieldDecorator('companyid')(
                <Select name="companyid">
                  {p.yhdwList
                    ? p.yhdwList.map(i => (
                        <Option key={i.Id} value={i.Id}>
                          {i.Name}
                        </Option>
                      ))
                    : null}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <Col span={14}>
              <FormItem {...formItemLayout2} label="问题类型">
                {getFieldDecorator('type')(
                  <Select onChange={this.handleWtlxChange}>
                    {wtlxList
                      ? wtlxList.map(i => (
                          <Option key={i.classid} value={i.classid}>
                            {i.cname}
                          </Option>
                        ))
                      : null}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={9}>
              <FormItem>
                {getFieldDecorator('ztype')(
                  <Select>
                    {s.wtlxZList
                      ? s.wtlxZList.map(i => (
                          <Option key={i.Id} value={i.Id}>
                            {i.czname}
                          </Option>
                        ))
                      : null}
                  </Select>
                )}
              </FormItem>
            </Col>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="上报来源">
              {getFieldDecorator('source')(
                <Select>
                  {p.sblyList
                    ? p.sblyList.map(i => (
                        <Option key={i.Id} value={i.Id}>
                          {i.Title}
                        </Option>
                      ))
                    : null}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="处理状态">
              {getFieldDecorator('status')(
                <Select>
                  <Option value="0">待分派</Option>
                  <Option value="1">未处理</Option>
                  <Option value="2">处理中</Option>
                  <Option value="3">已处理</Option>
                  <Option value="4">退单</Option>
                  <Option value="9">已结案</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={6}>
            <Col span={12}>
              <FormItem {...formItemLayout1} label={`超时时间：`}>
                {getFieldDecorator('bovertime', {
                  rules: [{ required: false, message: '' }],
                })(<InputNumber min={1} style={{ width: 80 }} />)}
              </FormItem>
            </Col>
            <Col span={1} style={{ lineHeight: '40px' }}>
              <span>～</span>
            </Col>
            <Col span={9}>
              <FormItem>
                {getFieldDecorator('eovertime', {
                  rules: [{ required: false, message: '' }],
                })(<InputNumber min={1} style={{ width: 80 }} />)}
                小时
              </FormItem>
            </Col>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="上报时间">
              {getFieldDecorator('sbtime')(<RangePicker />)}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem wrapperCol={{ offset: 2 }}>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
              <Button style={{ marginLeft: 10 }} onClick={this.handleReset}>
                重置
              </Button>
              <Button type="primary" style={{ marginLeft: 10 }}>
                导出
              </Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}

const YhglQueyFm = Form.create()(YhglQueyForm);
export default YhglQueyFm;
